<!DOCTYPE html>
<html lang="zh" data-bs-theme = "dark" id="html1">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark mode</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="../Bootstrap/js/bootstarp-5-3-0.js"></script>

</head>
<body>
    <div id="div1" class="p-3 text-body bg-body">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Color modes</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dark</li>
          </ol>
        </nav>
      
        <p>This should be shown in a <strong>dark</strong> theme at all times.</p>
      
        <div class="progress mb-4">
          <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      
        <div class="dropdown mb-4">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
            Dark dropdown
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
            <li><a class="dropdown-item active" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
          </ul>
        </div>
    </div>
      
    <div class="p-3 text-body bg-body rounded">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Color modes</a></li>
                <li class="breadcrumb-item"><a href="#">Dark</a></li>
                <li class="breadcrumb-item active" aria-current="page">Light</li>
            </ol>
        </nav>
        
        <p>This should be shown in a <strong>light</strong> theme at all times.</p>
        
        <div class="progress mb-4">
            <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
                Light dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
                <li><a class="dropdown-item active" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <button class="btn btn-primary" id="btn1">Change Color Model</button>

    <script>
        let btn1 = document.getElementById("btn1");
        btn1.addEventListener('click',()=>{
            let html1 = document.getElementById("html1");
            html1.setAttribute("data-bs-theme","light");
        })
    </script>
</body>
</html>